<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-pink" :isBack="true">
			<block class="text-pink" slot="content">学员</block>
		</cu-custom>
		<view class="bg-white padding">
			<view class="grid col-3">
				<view class="padding-sm" v-for="(hy, index) in xys" :key="index">
					<view class="bg-cyan shadow round">
						<view class="flex justify-center flex-direction align-center">
							<view class="cu-avatar xl round" :style="'background-image:url(' + hy.headimg + ')'"></view>
							<view class="padding-sm">{{ hy.nc }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="" class="padding">
			<button @click="loadMore" class="cu-btn block bg-pink lg">显示更多</button>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				xys: [], // 存储后端返回的学员数据
				pageInfo: {
					current: 1,
					total: 0,
					size: 9
				},
			};
		},
		onLoad: function() {
			this.search(); // 页面加载时获取数据
		},
		methods: {
			loadXy: function() {
				this.api("/client/page").send({
					clientids: this.common.getAttribute("cliendids"), // 传递教练ID
					current: this.pageInfo.current, // 当前页码
					size: this.pageInfo.size // 每页显示的记录数
				}).then(data => {
					if (data.clientspage) {
						// 将新数据追加到现有数据中
						this.xys = [...this.xys, ...data.clientspage.records];
						// 更新总记录数
						this.total = data.clientspage.total;
					}
				});
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadXy();
			},
			search: function() {
				this.xys = [];
				this.pageInfo.current = 1;
				this.loadXy();
			},
		}
	};
</script>